<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <button>点击</button>
    <script>
        /*窗口加载事件
        1.window.onload = function(){}
        是窗口（页面）加载事件，当文档内容完全加载完成会触发
        该事件（包括图像、脚本文件、css文件等），就是调用的处理函数
        but window.onload 传统注册事件方式只能写一次，如果有多个
        会以最后一个window.onload为准  所以最好使用addEventListener注册事件
        2.window.addEventListener('load',function(){})
        */
       window.onload = function(){
           var btn = document.querySelector('button');
           btn.addEventListener('click',function(){
               alert('点击我');
           })
       }

       /*document.addEventListener('DOMContentLoaded',function(){})
       DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片
       flash等等   IE9以上才支持
       如果页面的图片很多的话，从用户访问到onload触发可能需要较长时间
       交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适
       */
      document.addEventListener('DOMContentLoaded',function(){
          alert(33);
      })
     </script>
</body>
</html>